<template>
	<div class="card">
		<div class="card_header">
			<img class="card_img" :src="info.ppicture" alt="商品"   v-if="info.ppicture"/>
		</div>
		<div class="card_message">
			<p class="card_name">{{ info.pname }}</p>
			<div class="card_tag_one">
				<p class="card_desc">{{ info.pintro.length > 11 ? info.pintro.slice(0, 11) + '...' : info.pintro }}</p>
			</div>
			<div class="card_tag_two">
				<p class="card_price">¥{{ info.pprice }}</p>
				<p class="card_originalPrice" v-if="info.originalPrice">¥{{ info.originalPrice }}/份</p>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref} from 'vue';
const { proxy } = getCurrentInstance();
// 声明props
const props = defineProps({
	info: {
		type: Object,
		default: {
			id: 0,
			pname: '精品巴沙鱼',
			pintro: '龙利鱼柳300~450g/片',
			pprice: 10,
			uname: '',
			ppicture: require('@/assets/img/index/yu.png'),
			mailtype: 0,
		},
	},
});
const data = reactive({});
const {} = toRefs(data);
const goTO = () => {
	proxy.$router.push({
		path: '/shopDetail',
		query: {
			id: props.info.id,
		},
	});
};
</script>

<style lang="scss" scoped>
.card {
	width: 250px * 0.5;
	background-color: white;
	&_header {
		border-radius: 20px;
		height: 180px * 0.5;
		width: 250px * 0.5;
		background-color: #ececec;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	&_img {
		height: 180px * 0.4;
		width: 250px * 0.4;
	}
	&_message {
		padding: 0px 4px 0px 4px;
	}
	&_name {
		margin-top: 18px * 0.5;
		font-size: 28px * 0.5;
		font-weight: bold;
		line-height: 1;
	}
	&_desc {
		line-height: 1;
		font-size: 12px;
		color: #777777;
	}
	&_price {
		line-height: 1;
		font-size: 32px * 0.5;
		color: #fb5746;
		letter-spacing: 0px;
		font-weight: bold;
		margin-right: 6px;
	}
	&_originalPrice {
		line-height: 1;
		font-size: 18px * 0.5;
		color: #777777;
		text-decoration: line-through;
	}
	&_tag_one {
		margin-top: 7px;
	}
	&_tag_two {
		margin-top: 10px * 0.5;
		display: flex;
		align-items: center;
	}
}
</style>
